<script setup>
import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import MyTable from "../../../components/MyTable.vue";
import MyPager from "../../../components/MyPager.vue";
import { onMounted, reactive, ref } from "vue";
import { deleteApi, deleteBatchApi, pageApi } from "../../../api/axios.js";
import { myPage } from "../../../util/request.js";
import { isNotEmpty, isNotNull } from "../../../util/index.js";
import {notYet} from "../../../util/index.js";
import router from "../../../router/index.js";
import {orderStateFormat} from "../../../util/project.js";
// 路径导航
const navItems = [
  { icon: 'order', label: '订单管理' },
  { icon: 'Flag', label: '订单列表' },
];

// 页面头
const headItems = [
  { type: 'ipt', span: 5, placeholder: '按用户名搜索', callback: pageLikeTitle },
];

//表格按钮
const buttons =[
  {label:'订单明细',callback:listOrderDetail}
];

// 表格列
const columns = [
  { label: '订单编号', prop: 'sn', width: 120 },
  { label: '订单总价', prop: 'totalAmount',  width: 100, sortable: true },
  { label: '支付总价', prop: 'payAmount',  width: 140, sortable: true},
  { label: '订单状态', prop: 'status',  width: 100, sortable: true,type: 'tag',format: orderStateFormat},
  { label: '用户名', prop: 'username',  width: 140, sortable: true},
  { label: '订单描述', prop: 'info', type: 'card', tooltip: false },

];


// 表格行 + 分页 + 菜单标题
let records = ref([]);
let pageInfo = reactive({ pageNum: 1, pageSize: 5, callback: page });
let username = ref('');

// 分页查询
async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {
  let config = {
    records, pageInfo,
    api: pageApi,
    params: { pageNum, pageSize, pid: 0 },
    args: { module: 'order' },
  };
  if (isNotEmpty(username.value)) config['params']['username'] = username.value;
  await myPage(config);
}

// 按菜单标题模糊查询
function pageLikeTitle(val) {
  if (isNotNull(val) || username.value) {
    username.value = val;
    page();
  }
}

/* ===================== 查询子菜单 ===================== */

/**
 * 查询子菜单
 * 1.存端父权龈主键pid
 * 2.存做父权领标题pTitLe
 * 3.路虫到SubMenu页面
 *
 * @param row 表格行
 */
function listOrderDetail(row) {
  // sessionStorage.setItem('pid', row['id']);
  // sessionStorage.setItem('pTitle', row['title']);
  router.push('/OrderDetail');
}

/* ===================== 加载函数 ===================== */

onMounted(() => page());
</script>


<template v-if="records">
  <my-nav :items="navItems"/>
  <my-head :items="headItems"/>
  <my-table module="order"
            insert-page="/OrderInsert"
            update-page="/OrderUpdate"
            :delete-api="deleteApi"
            :delete-batch-api="deleteBatchApi"
            :delete-callback="page"
            :excel-api="notYet"
            :records="records"
            :columns="columns"
            :buttons="buttons"/>
  <my-pager :page-info="pageInfo"/>
</template>

<style scoped lang="scss">

</style>